<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { routerAdd, routerFind, routerFindById, routerModify, routerRemove } from '@/api/system/router'
import { Modal } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'

const globalStore = useGlobalStore()

// 搜索表单
const searchForm = reactive({
  // 显示控制
  visible: false,
  // 搜索
  search: () => {
    routerFind().then(resp => {
      searchForm.list = resp.data
    })
  },
  // table 数据
  list: {
    total: 0,
    list: [],
    pageSize: 10,
    pageNum: 1
  }
})

// 操作数据表单
const operationForm = reactive({
  // 弹框标题
  title: '添加用户',
  // 是否显示
  visible: false,
  // 表单
  form: {
    icon: '',
    id: null,
    isMenu: true,
    name: '',
    path: '',
    show: true,
    uri: '',
    weight: 0,
    parentId: 0
  },
  // 验证
  rules: {
    name: [{ required: true, message: '菜单名不能为空' }],
    uri: [{
      validator: (value: any, callback: (error?: string) => void) => {
        if (operationForm.form.isMenu) {
          return
        }
        if (`${value}`.trim() == '') {
          callback('路由菜单uri不能为空')
        }
      }
    }],
    path: [{
      validator: (value: any, callback: (error?: string) => void) => {
        if (operationForm.form.isMenu) {
          return
        }
        if (`${value}`.trim() == '') {
          callback('路由菜单path不能为空')
        }
      }
    }]
  },
  // 打开弹框
  open: (record: any) => {
    operationForm.title = '添加路由'
    operationForm.visible = true
    operationForm.reset()
    // 设置上级id
    if (record) {
      operationForm.form.parentId = record.id
    }
  },
  //修改
  modify: (record: any) => {
    operationForm.title = '修改路由'
    routerFindById(record.id).then(resp => {
      operationForm.form = resp.data
      operationForm.visible = true
    })

  },
  //删除
  remove: (record: any) => {
    Modal.confirm({
      title: '警告！',
      content: `确定删除 [${record.name}] 吗？`,
      onOk: () => {
        routerRemove(record.id).then(() => {
          searchForm.search()
        })
      }
    })
  },
  //提交
  submit: ({ errors, values }: any) => {
    if (errors) return

    // 修改
    if (values.id) {
      routerModify(values).then(() => {
        operationForm.visible = false
        searchForm.search()
      })
      return
    }

    //新增
    routerAdd(values).then(() => {
      operationForm.visible = false
      searchForm.search()
    })
  },
  reset: () => {
    operationForm.form = {
      icon: '',
      id: null,
      isMenu: true,
      name: '',
      path: '',
      show: true,
      uri: '',
      weight: 0,
      parentId: 0
    }
  }
})

onMounted(() => {
  searchForm.search()
  document.title = 'Rocc管理系统 路由管理'
})

</script>

<template>
  <div class="w-full h-full">
    <div class="flex justify-between mr-1">
      <a-space wrap>
        <a-button type="primary" @click="operationForm.open">
          <template #icon>
            <icon-plus />
          </template>
          添加路由
        </a-button>
      </a-space>
      <a-space>
        <a-tooltip content="刷新列表" position="tr">
          <a-button size="small" shape="circle" @click="searchForm.search">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>
      </a-space>
    </div>
    <a-drawer v-model:visible="operationForm.visible" :title="operationForm.title" :width="500" :footer="false">
      <a-form ref="operationFormRef" :model="operationForm.form" :rules="operationForm.rules"
              @submit="operationForm.submit">

        <a-form-item label="上级ID" field="parentId">
          <a-select v-model="operationForm.form.parentId">
            <a-option :value="0">无上级菜单</a-option>
            <a-option :value="Number(k)" :label="v" :key="k"
                      v-for="(v,k) of globalStore.global.caches.database.parentMenu" />
          </a-select>
        </a-form-item>
        <a-form-item label="菜单名称" field="name" validate-trigger="blur" hide-asterisk>
          <a-input v-model="operationForm.form.name" />
        </a-form-item>
        <a-form-item label="Icon" field="icon" validate-trigger="blur">
          <a-input v-model="operationForm.form.icon" />
        </a-form-item>
        <a-form-item label="组件地址" field="path" validate-trigger="blur" v-show="!operationForm.form.isMenu">
          <a-input v-model="operationForm.form.path" />
        </a-form-item>
        <a-form-item label="URI" field="uri" validate-trigger="blur" v-show="!operationForm.form.isMenu">
          <a-input v-model="operationForm.form.uri" />
        </a-form-item>
        <a-form-item label="权重" field="weight" validate-trigger="blur">
          <a-input-number v-model="operationForm.form.weight" />
        </a-form-item>
        <a-form-item>
          <a-space>
            {{ operationForm.form.isMenu ? '菜单' : '路由菜单' }}：
            <a-switch v-model="operationForm.form.isMenu" />
            菜单{{ operationForm.form.show ? '可见' : '不可见' }}：
            <a-switch v-model="operationForm.form.show" />
          </a-space>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-table :data="searchForm.list.list" expandable row-key="id" :pagination="false" :scroll="{y:'600px'}"
             :scrollbar="false">
      <template #columns>
        <a-table-column title="ID" data-index="id" width="180" />
        <a-table-column title="菜单名称" data-index="name" width="180"></a-table-column>
        <a-table-column title="icon" data-index="icon" width="80">
          <template #cell="{record}">
            <component :is="record.icon" />
          </template>
        </a-table-column>
        <a-table-column title="uri" data-index="uri"></a-table-column>
        <a-table-column title="组件地址" data-index="path"></a-table-column>
        <a-table-column title="显示" data-index="show" width="120"></a-table-column>
        <a-table-column title="操作" width="320">
          <template #cell="{record}">
            <a-space>
              <a-button type="text" status="warning" @click="operationForm.modify(record)">
                <template #icon>
                  <icon-edit />
                </template>
                修改
              </a-button>
              <a-button type="text" status="success" @click="operationForm.open(record)" v-if="record.isMenu">
                <template #icon>
                  <icon-plus />
                </template>
                添加子路由
              </a-button>
              <a-button type="text" status="danger" @click="operationForm.remove(record)">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <!--
        <div class="mt-4 flex justify-end">
          <a-pagination v-model:current="searchForm.list.pageNum"
                        v-model:page-size="searchForm.list.pageSize"
                        :total="searchForm.list.total"
                        @change="searchForm.search"
                        show-total
                        show-jumper
                        show-page-size
          ></a-pagination>
        </div>
    -->
  </div>
</template>

<style scoped>

</style>
